<script setup>
import { handelMessageToString } from '@/utils/dialog-utils'

const props = defineProps({
  message: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <div class="message-system" v-html="handelMessageToString(props.message, { mode: 'html' })"></div>
  <!--<div class="recall-message" v-if="props.data?.messageType === 'recall_message'">-->
  <!--  {{ props.isCurrentUser ? '你' : `${props.data.deleteByUser} ` }}撤回了一条消息-->
  <!--</div>-->
  <!--<div class="leave-message" v-if="props.data?.messageType === 'leave_channel'">-->
  <!--  {{ props.data.realName }} 退出了群聊-->
  <!--</div>-->
  <!--<div v-if="props.data?.messageType === 'add_member'">-->
  <!--  {{ props.data.realName }} 邀请了-->
  <!--  <span v-for="(item, index) in props.data.memberList" :key="item.userId">-->
  <!--      {{ `${index ? '、' : ''}${item.realName}` }}-->
  <!--    </span>-->
  <!--  进入群聊-->
  <!--</div>-->
  <!--<div v-if="props.data?.messageType === 'remove_member'">-->
  <!--  {{ props.data.realName }} 将-->
  <!--  <span v-for="item in props.data.memberList" :key="item.userId">{{ item.realName }}</span>-->
  <!--  移出了群聊-->
  <!--</div>-->
</template>

<style scoped lang="scss">
.message-system {
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
  color: var(--elp-text-color-secondary);
}
</style>
